<template>
	<div>
		<div class="mainCon">
			<div class="containercontent">
				<div class="penalrow selectw100">
					<div class="inlineblock verticalmiddle infoitem">
						<div class="inlineblock verticalmiddle">
							起止日期
						</div>
						<div class="inlineblock verticalmiddle informationItem">
							<el-date-picker clearable v-model="qizhiriqi" size="mini" value-format='yyyy-MM-dd' type="daterange" range-separator="-"
							 start-placeholder="开始日期" end-placeholder="结束日期" @change="doSearch">
							</el-date-picker>
						</div>
					</div>
					<div class="inlineblock verticalmiddle infoitem">
						<div class="inlineblock verticalmiddle">
							登记单状态
						</div>
						<div class="inlineblock verticalmiddle informationItem">
							<el-select v-model="outstockListParams.status" placeholder="请选择" clearable size="mini" filterable @change="doSearch">
								<el-option v-for="item in zhuangtai" :key="item.value" :label="item.label" :value="item.value">
								</el-option>
							</el-select>
						</div>
					</div>
					<div class="inlineblock verticalmiddle infoitem">
						<div class="inlineblock verticalmiddle">
							领用人
						</div>
						<div class="inlineblock verticalmiddle informationItem">
							<el-select v-model="applicant" clearable placeholder="请选择" size="mini" filterable @change="doSearch">
								<el-option v-for="item in EmployeeByLabs" :key="item.account" :label="item.name" :value="item.account">
								</el-option>
							</el-select>
						</div>
					</div>
					<div class="inlineblock verticalmiddle infoitem">
						<el-button type="warning" size="mini" @click="doSearch" class="searchIcon">搜索</el-button>
						<el-button type="warning" size="mini" @click="emptySearch" class="searchIcon">清空</el-button>

					</div>
				</div>
				<div class="separaterowTable">
					<div class="tableTittle">
						<div><span class="fontImpact">1</span><span>出库列表</span></div>
						<el-button type="primary" size="mini" @click="chukudengji" style="float:right;margin-left:8px;" v-if="userOpernation.add.display">出库登记</el-button>
           				<el-button type="primary" size="mini" @click="daoru" style="float:right;;margin-left:8px;">导入</el-button>
						<el-button type="primary" size="mini" @click="dlownloadattachment" style="float:right">下载模板</el-button>
						<form id="fileForm2" style="display:inline-block">
							<input type="file" name="file" id="file2" @change="upload1">
						</form>
					</div>
					<el-table :data="rukushenqingTable" style="width: 100%" size="mini" class="tableCon">
						<el-table-column label="序号" min-width="50px">
							<template slot-scope="scope">
								{{scope.$index+(readQuery.page - 1) * readQuery.pageCount + 1}}
							</template>
						</el-table-column>
						<el-table-column property="billNo" label="单号" min-width="120px" show-overflow-tooltip>
						</el-table-column>
						<el-table-column property="applicant" label="领用人" min-width="80px" :formatter="foramtterAccount">
						</el-table-column>
						<el-table-column property="createTime" label="出库时间" show-overflow-tooltip min-width="145px">
							<template slot-scope="scope">
								{{scope.row.hasOwnProperty('createTime')?scope.row.createTime.split('.')[0]:'/'}}

							</template>
						</el-table-column>
						<el-table-column property="status" label="登记单状态" min-width="100px" :formatter="formatter">

						</el-table-column>
						<el-table-column property="remark" label="备注" show-overflow-tooltip min-width="100px" :formatter="util.tableFormatter">
						</el-table-column>
						<el-table-column label="操作" min-width="200px">
							<template slot-scope="scope">

								<el-button type="text" size="mini" @click="shenhe(scope.row)" v-if="scope.row.isApprove">审核</el-button>
								<el-button type="text" size="mini" @click="chukutijiao(scope.row)" v-if="(scope.row.status==2 || scope.row.status== 4) && userOpernation.update.display">编辑</el-button>
								<el-button type="text" size="mini" @click="chukutijiao(scope.row,'copy')" v-if="scope.row.status==342 && userOpernation.add.display">复制</el-button>
								<el-button type="text" size="mini" @click="exportChuku(scope.row)" v-if="scope.row.status==342 && userOpernation.export.display">导出</el-button>
								<el-button type="text" size="mini" @click="chukutijiao(scope.row,'look')" v-if="userOpernation.select.display">详情</el-button>
								<el-button type="text" size="mini" @click="deleteRow(scope.row)" v-if="scope.row.status==2 && userOpernation.delete.display">删除</el-button>

							</template>
						</el-table-column>
					</el-table>
					<div class="block changepages">
						<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="readQuery.page" :page-sizes="[20, 50, 100, 200]"
						 :page-size="readQuery.pageCount" layout="total, sizes, prev, pager, next, jumper" :total="rowNumber">
						</el-pagination>
					</div>
				</div>
			</div>
		</div>

		<div v-if="chujudengjiShow">
			<chujudengji :status="danjuzhuangtai" :shenpi="shenpi" :aqsp="aqsp" :outstockParams="outstockParams"></chujudengji>
		</div>
	</div>
</template>

<script>
	import { mapState } from 'vuex'
	import chujudengji from './chuKuDengJi.vue'

	export default {
		data() {
			return {
				errorMessageName: "",

				rukushenqingTable: [],
				pageinfo: {},
				outstockListParams: {
					startDate: '',
					endDate: '',
					status: '',

				},
				readQuery: {
					page: 1,
					pageCount: 20
				},
				outstockParams: {
					billdate: this.util.date(), ///(出库日期)
					storekeeper: "", //(库管员)
					applicant: JSON.parse(sessionStorage.getItem('laboratoryAccountInfo')).loginid, //(领用人)
					remark: "",
					submitType: "",
					outstockdetBeanList: []
				},
				applicant: JSON.parse(sessionStorage.getItem('laboratoryAccountInfo')).loginid, //(领用人)
				materialList: [],
				userTableDate: [],
				enableStatusValue: '',
				searchName: '',
				currentPage: 1,
				materialTypeValue: '',
				chujudengjiShow: false,
				zhuangtaiValue: '',
				zhuangtai: [{
					value: 2,
					label: '草稿'
				},
				{
					value: 341,
					label: '待审批'
				},
				{
					value: 342,
					label: '已审批'
				},
				{
					value: 4,
					label: '驳回'
				},
				],
				qizhiriqi: '',
				danjuzhuangtai: '',
				shenpi: false,
				aqsp: false,
				rowNumber: 0,


			}
		},
		props: ['userOpernation',],
		computed: {
			tabDivHeight() {
				return (window.innerHeight - 220)
			},
			...mapState(['daibanItemShow', 'enableStatus', 'tableHeightA', 'typeofAbilityTableDate', 'materialType', 'daibanItem', 'EmployeeByLabs']),
		},
		components: {
			chujudengji,
		},
		created() {

			if (this.daibanItemShow) {
				this.shenhe(this.daibanItem)
				this.$store.commit('passDaibanItemShow', false)
			}
		},
		mounted() {
			this.readOutstockList();
			//  this.readStockByMatarialCode();
		},
		watch: {
			daibanItem(newer, older) {
				if (this.daibanItemShow) {
					this.shenhe(this.daibanItem)
					this.$store.commit('passDaibanItemShow', false)
				}
			},
			'userTableDate': function (value) {
				console.log(value)
			},
			readQuery: {
				handler(val, oldVal) {
					this.readOutstockList()
				},
				deep: true
			},
		},
		methods: {
      foramtterAccount(row, column, cellValue, index) {
        var res = "";
        if(cellValue == 'admin'){
          res = '管理员'
        }else if(cellValue == '' || cellValue == undefined || cellValue == null){
          res = '---'
        }else{
          res = row.applicantName
        }
        return res ? res : cellValue;
      },
			//处理状态
			formatter(row, column, cellValue, index) {
				return this.util.changeStatus({ cellValue: cellValue, list: this.zhuangtai })
			},
			// 到处出库资料
			exportChuku(row) {
				// console.log(row)
        let token = sessionStorage.getItem('loginAccount')?sessionStorage.getItem('loginAccount'):undefined
				let url = 'resource/exportOutStockdet.htm?billNo=' + row.billNo + "&token=" + token
				window.open(process.env.baseUrl + url)
			},
			//、(1)交互名称：获取出库列表
			// (2)url:readOutstockList.htm
			// (3)参数：startDate  开始时间(可选)
			//			endDate  结束时间(可选)
			//			status  登记状态(可选)

			readOutstockList() {
				if (!!this.qizhiriqi) {
					this.outstockListParams.startDate = this.qizhiriqi[0]
					this.outstockListParams.endDate = this.qizhiriqi[1]
				} else {
					this.outstockListParams.startDate = ''
					this.outstockListParams.endDate = ''
				}
				this.outstockListParams.applicant = this.applicant;
				this.outstockListParams.page = this.readQuery.page
				this.outstockListParams.pageCount = this.readQuery.pageCount;
				this.$http({
					apiUrl: 'resource/readOutstockList.htm',
					method: 'post',
					params: this.outstockListParams,
				}).then(res => {
					if (res.code === 0) {
						this.rukushenqingTable = res.data
						if (!res.pageinfo) {
							this.rowNumber = 0;
						} else if (res.pageinfo && !res.pageinfo.rowNumber) {
							this.rowNumber = 0;
						} else {
							this.rowNumber = res.pageinfo.rowNumber;
						}
					}
				})
			},
			//	10、(1)交互名称：获取出库详情
			// (2)url:readOutstock.htm
			// (3)参数：id
			readOutstock(row) {
				return new Promise((resolve, reject) => {
					this.$http({
						apiUrl: 'resource/readOutstock.htm',
						method: 'post',
						params: {
							id: row.id
						},
						isJson: false
					}).then(res => {
						if (res.code === 0) {
							resolve(res)
							//						console.log(res)
						}
					})
				})
			},
			emptySearch() {
				this.outstockListParams = {
					startDate: '',
					endDate: '',
					status: '',
				};
				this.applicant = "";
				this.qizhiriqi = '';
				this.doSearch();
			},
			doSearch() {
				this.readQuery.page = 1;
				this.readOutstockList()
			},
			deleteRow(row) {
				this.$confirm('是否删除此条信息？')
					.then(_ => {
						this.$http({
							apiUrl: 'resource/deleteOutstock.htm',
							method: 'post',
							params: {
								id: row.id
							},
							isJson: false
						}).then(res => {
							if (res.code === 0) {
								console.log(res)
								this.$message({
									showClose: true,
									message: '删除成功！',
									type: 'success'
								})
								this.readOutstockList()
							}
						}).catch(err => {
							console.log(err)
						})
					})
			},

			handleSizeChange(val) {
				this.readQuery.pageCount = val;
			},
			handleCurrentChange(val) {
				this.readQuery.page = val;
			},
			editUser: function (row) {

			},

			shenhe(row) {
				this.readOutstock(row).then(res => {
					this.outstockParams = res.data
					this.chujudengjiShow = true;
					this.danjuzhuangtai = 'shenhe';
					this.shenpi = true;
					this.aqsp = false;
				})

			},
			daoru() {
				document.getElementById("file2").click()
			},
			// 导入文件
			upload1(event) {
				this.loading = true;
				var files = document.getElementById('file2').files[0];
				if (files == undefined) {
				this.loading = false;
				return;
				}
				var formData = new FormData();
				formData.append('file', files)
				this.$axios({
				method: 'post',
				url: '/resource/importOutstockByExcel.htm',
				data: formData,
				headers: {
					'Content-Type': 'multipart/form-data',
					'token':sessionStorage.getItem('loginAccount')?sessionStorage.getItem('loginAccount'):undefined
				}
				}).then(res => {
				this.loading = false;
				event.target.value= "";
				if (res.data.code == 0) {
					this.$notify({
					title: '消息',
					message: res.data.description,
					type: 'success'
					})
					this.readOutstockList();

				} else {
					this.errorMessageName = res.data.description;
					this.$confirm("文件导入出错，是否下载错误信息?", "提示", {
						confirmButtonText: "下载",
						cancelButtonText: "取消",
						type: "warning",
						})
						.then(() => {
							//下载
							this.downloadErrorMessage();
						})
						.catch((e) => {
							//取消
						});
					}
				})
			},
			downloadErrorMessage() {
        		let token = sessionStorage.getItem('loginAccount')?sessionStorage.getItem('loginAccount'):undefined
				window.open(process.env.baseUrl + 'AnnexAction/errorExport.htm?filename=' + this.errorMessageName);
			},
			// 下载附件
			dlownloadattachment(row) {
				var url = "/resource/getOutstockByExcel.htm"
        		let token = sessionStorage.getItem('loginAccount')?sessionStorage.getItem('loginAccount'):undefined
				window.open(process.env.baseUrl + url + '?id=' + row.id + "&token=" + token);
			},
			chukudengji() {
				this.chujudengjiShow = true;
				this.outstockParams = {
					billdate: this.util.date(), ///(出库日期)
					storekeeper: "", //(库管员)
					applicant: JSON.parse(sessionStorage.getItem('laboratoryAccountInfo')).loginid, //(领用人)
					remark: "",
					submitType: "",
					outstockdetBeanList: []
				};
				this.danjuzhuangtai = 'chukudengji';
				this.shenpi = false;
				this.aqsp = false;
			},
			chukutijiao(row, flag) {
				this.chujudengjiShow = false
				this.readOutstock(row).then(res => {
					this.outstockParams = res.data
					this.chujudengjiShow = true;
					this.danjuzhuangtai = 'chukutijiao';
					if (flag == 'copy') {
						this.danjuzhuangtai = 'chukudengji';
					} else if (flag == 'daochu') {
						this.danjuzhuangtai = 'daochu';
					} else if (flag == 'look') {
						this.danjuzhuangtai = 'look';
					}
					this.shenpi = false;
					this.aqsp = false;
				})
			},
			anquanshenpi() {
				this.chujudengjiShow = true;
				this.danjuzhuangtai = 'anquanshenpi';
				this.shenpi = true;
				this.aqsp = true;
			}
		}
	}

</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
#fileForm2,
#file2 {
width: 50px;
height: 20px;
opacity: 0;
position: absolute;
left: 0;
top: 0;
z-index: -1;
}
</style>
